<template>
  <div id="cesiumContainer"></div>
</template>
  
<script>
export default {
  name: "CesiumContainer",
  data() {
    return {};
  },
  mounted() {
    this.initViewer();
  },
  methods: {
    async initViewer() {
      Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OWQ5ZTYzZi05NThmLTRmYjctOTk1Zi01YjczMTQ0ZjZlODAiLCJpZCI6NjE0MjMsImlhdCI6MTYyNjA3MjcwMn0.t78sW9YdR2gWIB55li5ZBYOeEz84owJajRUgGmVBbdc";
      const viewer = new Cesium.Viewer("cesiumContainer", {
        terrainExaggeration: 1,
        // imageryProvider: imageryProvider,
        // terrainProvider: null,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        navigationHelpButton: false,
        sceneModePicker: false,
        timeline: false,
        animation: false,
        selectionIndicator: false,
        infoBox: false,
      });
      viewer._cesiumWidget._creditContainer.style.display = "none";
      viewer.scene.globe.showGroundAtmosphere = false;
      var imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
        url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/WMTS",
        layer: "World_Imagery",
        style: "default",
        format: "image/jpeg",
        tileMatrixSetID: "GoogleMapsCompatible",
        maximumLevel: 19,
        credit: new Cesium.Credit("© Esri", "https://www.esri.com/"),
      });
      viewer.imageryLayers.addImageryProvider(imageryProvider);

      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(99, 36.4, 18000008),
        orientation: {},
      });
      viewer.scene.globe.depthTestAgainstTerrain = false;
      window.Viewer = viewer;
    },
  },
};
</script>
  
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>